import React from 'react';
import PubSub from "pubsub-js";
import { Input, Select, Space, DatePicker, Button } from 'antd';
import './header.scss'


let obj = {
        title:"",
        date:'',
        priority:''
    }
    

// select
const handleChange = (value) => {
    console.log(value);
    obj.priority = value
};
// input
const handleIpt = (value) => {
    obj.title = value.target.value

};
//日期选择器
const onChange = (date,dateString) => {
    obj.date = dateString 
};
// 
const add = () =>{
    if(obj.priority===''){
        obj.priority='1'
        PubSub.publish('list',obj)    
    }else{
        PubSub.publish('list',obj)
    }
    obj={
        title:"",
        date:'',
        priority:''
    }
}
const Header = () => {
    return (<>
        <div className='header'>
            <div>
                <span>日期：</span>
                <Space className='wid' direction="vertical">
                    <DatePicker className='wid' onChange={onChange} />
                </Space>
            </div>

            <div>
                <span>标题：</span>
                <Input className='wid' onChange={handleIpt} placeholder="请输入标题" />
            </div>

            <div>
                <span className='priority'>优先级:</span>
                <Space wrap >
                    <Select
                        defaultValue="1"
                        style={{
                            width: 240,
                        }}
                        onChange={handleChange}
                        options={[
                            {
                                value: '1',
                                label: '一级',
                            },
                            {
                                value: '2',
                                label: '二级',
                            },
                            {
                                value: '3',
                                label: '三级',
                            }
                        ]}
                    />
                </Space>
            </div>
            <Button type="primary" onClick={add}>添加</Button>
        </div>

    </>);
}

export default Header;